<template>
	<div class="searchresult">
		<el-row v-for="(item,index) in projectoptions" :key="index" @click.native="locationMap(item)">
			<el-col :span="24">
				<div class="grid-content bg-purple-dark">
					<div class="list-index">
						<div class="list-index-bg">{{index+1}}</div>
					</div>
					<div class="list-content">{{item.name}}</div>
				</div>
			</el-col>
		</el-row>
		<div class="page" v-show="total">
			<el-pagination :current-page="searchFrom.current" :page-size="searchFrom.size" @size-change="handleSizeChange" @current-change="pageChange" layout="prev, pager, next" :total="total">
			</el-pagination>
		</div>

	</div>
</template>
<script>
	export default {
		props: ['searchText'],
		created() {
			//this.queryList();
		},
		mounted() {

		},
		watch: {
			dialogVisible(val) {
				this.$emit('update:showDialog', val)
			}
		},
		data() {
			return {
				projectoptions: [],
				searchFrom: {
					current: 1, //页码
					size: 10, //每页条数
					keyword: '', //名称
				},
				total: 0, //总条数
			}
		},
		methods: {
			queryList(type) {
				this.projectoptions = [];
				/*如果是点击查询，页码初始化为1*/
				if(type && this.searchFrom.current != 1) {
					this.searchFrom.current = 1
					return false
				}
				this.searchFrom.keyword=this.searchText;
				this.ajax({
					url: 'tProject/selectGeometryPage',
					data: this.searchFrom
				}).then(data => {
					this.total = data.total
					this.projectoptions = data.records;
				})
			},
			locationMap(row) {
				if(row.wkt) this.$parent.locationMap(row.wkt);
			},
			show(row) {
				this.dialogVisible = !this.dialogVisible
			},
			pageChange(val) {
				this.searchFrom.current = val
				this.queryList()
			},
			//输入页码跳转
			handleSizeChange() {
				this.searchFrom.current = val
				this.queryList()
			},
		},
		components: {

		}
	}
</script>
<style scoped>
	.searchresult {
		position: absolute;
		top: 72px;
		left: 1%;
		width: 379px;
		background-color: #fff;
	}
	
	.el-row {
		margin-top: 5px;
		border-bottom: 1px dashed #DEDEDE;
		margin-bottom: 15px;
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.el-col {
		width: 100%;
	}
	
	.bg-purple-dark {
		/*background: #99a9bf;*/
	}
	
	.grid-content {
		min-height: 54px;
	}
	
	.list-index {
		height: 100%;
		width: 12%;
		float: left;
		line-height: 54px;
		text-align: center;
	}
	
	.list-index-bg {
		width: 28px;
		height: 28px;
		background-color: #3385ff!important;
		border-radius: 14px;
		/* margin-top: 18px; */
		line-height: 28px;
		color: #fff;
		margin-top: 13px;
		margin-left: 12px;
	}
	
	.list-content {
		height: 100%;
		width: 88%;
		float: left;
		line-height: 54px;
		cursor: pointer;
	}
	
	.cutpage {
		text-align: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	
	.page {
		margin-bottom: 16px !important;
	}
</style>